﻿<%@ Page EnableEventValidation = "false" Language="C#" AutoEventWireup="true" Inherits="cp_member_mycart" Codebehind="mycart.aspx.cs" %>
<%@ Register TagPrefix="ogrid" Namespace="Obout.Grid" Assembly="obout_Grid_NET" %>
<%@ Register TagPrefix="ogrid2" Namespace="Obout.Grid" Assembly="obout_Grid_NET" %>
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %> 
<%@ Register TagPrefix="obutton" Namespace="Obout.Interface" Assembly="obout_Interface" %>
<%@ Register TagPrefix="oflyout" Namespace="OboutInc.Flyout2" Assembly="obout_Flyout2_NET" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="JavaScript" type ="text/javascript">
        function ReloadBasketDetail(bID) {
            ob_post.AddParam("bID", bID);
            ob_post.post(null, "LoadBasketDetail", UpdateBasketDetails);
            ob_post.ResetParams();
        }
        
        function AddNewBasket() {
            ob_post.post(null, "AddNewBasket", UpdateAll);
        }
        
        function UpdatePriceCurrentBasket() {
            ob_post.post(null, "UpdatePriceCurrentBasket", UpdateAll);
        }

        function UpdateBasketDetails() {
            ob_post.UpdatePanel("cpBasketDetail");
        }
        function UpdateBasketList() {
            ob_post.UpdatePanel("cpBasketList");
        }
        function UpdateAll() {
            ob_post.UpdateAllPanels();
        }
        
        // client-side events for delete
        function gridBasketDetail_OnBeforeDelete(record) {
            return confirm("Bạn có chắc chắn là muốn xóa sản phẩm này khỏi giỏ hàng không?");
        }

        function gridBasketDetail_OnDelete(record) {
            ob_post.post(null, "UpdateBasketList", UpdateAll);
        }

        function gridListBasket_OnBeforeDelete(record) {
            return confirm("Bạn có chắc chắn là muốn xóa giỏ hàng này không?");
        }

        function gridListBasket_OnDelete(record) {
            ob_post.post(null, "UpdateBasketList", UpdateAll);
        }

        function gridBasketDetail_OnUpdate(record) {
            ob_post.post(null, "UpdateBasketList", UpdateAll);
        }

        function saveChange() {
            var oRecord = new Object();
            oRecord.idChiTietGioHang = document.getElementById('ipIdChiTietGioHangInFlyOut').value;
            oRecord.SoLuong = document.getElementById('tbProductQuantity').value;

            var SoLuong = parseInt(document.getElementById('tbProductQuantity').value);
            var SoLuongCu = parseInt(document.getElementById('ipOldProductQuantity').value);
            var MaxQuantity = parseInt(document.getElementById('ipMaxProductQuantity').value);
            
            if (SoLuong != null) {
                if (SoLuong == 0) {
                    alert("Số lượng sản phẩm phải là số nguyên dương");
                    return;
                }
                if (SoLuong > MaxQuantity) {
                    alert("Số lượng sản phẩm quý khách chọn vượt quá lượng tồn của công ty.");
                    return;
                }
                if (SoLuong != SoLuongCu) {
                    gridBasketDetail.executeUpdate(oRecord);
                }
            }
        }
        
    </script>
    
    <style type="text/css">
           .tdText {
                   font:11px Verdana;
                   color:#333333;
           }
           .option2{
                   font:11px Verdana;
                   color:#0033cc;
                   background-color___:#f6f9fc;
                   padding-left:4px;
                   padding-right:4px;
           }
           .tdTextLink {
                   font:11px Verdana;
                   color:#315686;
                   text-decoration:underline;
           }
           .rowEditTable {
                background-color: #e9f8fe;
                border: 3px solid #000000;
            }
        	
            .rowEditTable td {
                font-family: Verdana;
                font-size: 10px;
                color: #000000;		        
            }
    </style>
</head>
<script type="text/javascript" language="javascript">
/*fly out*/

function LoadUpdatePanelCommon(idR) {
    document.getElementById("imgProductInFlyout").src = "/images/HinhAnhSanPham/" + gridBasketDetail.Rows[idR].Cells["Url"].Value;
    document.getElementById("lbProductNameInFlyout").innerHTML = gridBasketDetail.Rows[idR].Cells["TenSanPham"].Value;
    document.getElementById("tbProductQuantity").value = gridBasketDetail.Rows[idR].Cells["SoLuong"].Value;
    document.getElementById("lbGia").innerHTML = gridBasketDetail.Rows[idR].Cells["DonGia"].Value;
    document.getElementById("ipIdChiTietGioHangInFlyOut").value = gridBasketDetail.Rows[idR].Cells["idChiTietGioHang"].Value;
    document.getElementById("ipOldProductQuantity").value = gridBasketDetail.Rows[idR].Cells["SoLuong"].Value;
}

function LoadUpdatePanelMaxQuantity(mQuan) {
    document.getElementById("ipMaxProductQuantity").value = mQuan;
}

function getMaxQuantity(idR) {
    // get product's image id
    var imgId=gridBasketDetail.Rows[idR].Cells["idHinhAnh"].Value;
    ob_post.AddParam("imgID",imgId);
    ob_post.post(null, "GetMaxQuantity", LoadUpdatePanelMaxQuantity);
    ob_post.ResetParams();
}

function popUpdate(eR)
{
    try
    {
        <%=Flyout1.getClientID()%>.AttachTo(eR.id);
        <%=Flyout1.getClientID()%>.Open();
        LoadUpdatePanelCommon(eR.id.toString().replace("imgUpdateBasket_", ""));
        
        getMaxQuantity(eR.id.toString().replace("imgUpdateBasket_", ""));
    } 
    catch(ex){
        alert(ex);
    }
}
function loadUpdateFlyout() {
    
}


function onlyNumbers(evt)
{
	var e = event || evt; // for trans-browser compatibility
	var charCode = e.which || e.keyCode;

	if (charCode > 31 && (charCode < 48 || charCode > 57))
		return false;

	return true; 
}

function closeFlyout() {
    <%=Flyout1.getClientID()%>.Close();
}
</script>
<body>
    <form id="form1" runat="server">
    <oajax:CallbackPanel id="cpBasketDetail" runat="server">
        <content>
        <ogrid2:Grid
                runat="server" ID="gridBasketDetail" AutoGenerateColumns="false"
		        FolderStyle="/App_Themes/E2GroupTheme/obout/styles/style_4"
		        AllowAddingRecords="false" 
		        AllowColumnResizing = "false"
		        AllowRecordSelection = "false"
		        AllowSorting = "true"
		        CallbackMode = "true"
		        Serialize = "true"
		        OnDeleteCommand = "gridBasketDetail_DeleteCommand"
		        OnUpdateCommand = "gridBasketDetail_UpdateCommand"
		        OnRebind = "gridBasketDetail_Rebind"
		        >
		    <ClientSideEvents 
		        OnBeforeClientDelete="gridBasketDetail_OnBeforeDelete" 
		        OnClientDelete="gridBasketDetail_OnDelete"
		        OnClientUpdate="gridBasketDetail_OnUpdate"
		    />
            <Columns>
                <ogrid2:Column DataField="idGioHang" Visible = "false"/>
                <ogrid2:Column DataField="idChiTietGioHang" Visible = "false"/>
                <ogrid2:Column DataField="idHinhAnh" Visible = "false"/>
                <ogrid2:Column DataField="TenSanPham" HeaderText="Tên sản phẩm" Width = "125" Wrap="true" Align="center"></ogrid2:Column>
                <ogrid2:Column DataField="Url" HeaderText="Hình ảnh" Width="100" Align="center" Wrap = "true">
                    <TemplateSettings TemplateID="ImageTemplate" />
                </ogrid2:Column>
                <ogrid2:Column DataField="MauSac" HeaderText="Màu sắc" Width = "90" Wrap ="true" Align="center"></ogrid2:Column>
                <ogrid2:Column DataField="SoLuong" HeaderText="Số lượng" Width = "90" Wrap ="true" Align="center"></ogrid2:Column>
                <ogrid2:Column DataField="DonGia" HeaderText="Đơn giá" Width="120" Wrap = "true" Align="center">
                    <TemplateSettings TemplateId="GiaTienTemplate" />
                </ogrid2:Column>
                
                <ogrid2:Column DataField="ThanhTien" HeaderText="Thành tiền" Width="120" Wrap = "true" Align="center">
                    <TemplateSettings TemplateId="GiaTienTemplate" />
                </ogrid2:Column>
                
                <ogrid2:Column DataField="NgayCapNhat" HeaderText="Lần cập nhật cuối" Width = "120" Wrap = "true"  Align="center"></ogrid2:Column>
                <ogrid2:Column DataField="CanCapNhatDonGia" HeaderText="Đơn giá đã cập nhật mới nhất" Width="120" Wrap = "true" Align="center">
                    <TemplateSettings TemplateId="NeedUpdateTemplate" />
                </ogrid2:Column>
                <ogrid2:Column DataField="SoLuongVuotQua" HeaderText="Số lượng phù hợp" Width="120" Wrap = "true" Align="center">
                    <TemplateSettings TemplateId="NeedUpdateTemplate" />
                </ogrid2:Column>
                <ogrid2:Column ID="CapNhatSanPham" DataField="" HeaderText="Thay đổi thông tin" Width="90" AllowEdit="true" Visible="true" Wrap ="true" Align="center" runat="server">
                        <TemplateSettings TemplateId="EditTemplate"/>
                </ogrid2:Column>
                <ogrid2:Column ID="XoaSanPham" DataField="" HeaderText="Xóa sản phẩm" Width="90" AllowDelete="true" Visible="true" Wrap ="true" Align="center" runat="server">
                        <TemplateSettings TemplateID="DeleteTemplate1"/>
                </ogrid2:Column>
            </Columns>
            <ScrollingSettings ScrollHeight="520" ScrollWidth = "510"/>
            <Templates>
                <ogrid2:GridTemplate runat="server" ID="ImageTemplate">
		            <Template>
		                <a href = "javascript:parent.location.href='/Products/detail.aspx?ProductId=<%# Container.DataItem["idSanPham"]%>';" style="outline:none">
		                    <img src="/images/HinhAnhSanPham/<%# Container.DataItem["Url"] %>" alt="" width="50" height="50" border="0" />
                        </a>
		            </Template>
	            </ogrid2:GridTemplate>
	            
	            <ogrid2:GridTemplate runat="server" ID="NeedUpdateTemplate">
		            <Template>
		                <img src="/images/Status/<%#GetUpdateStatus(Container.Value)%>" alt="" width="20" height="20"/>
		             </Template>
	            </ogrid2:GridTemplate>
	            <ogrid2:GridTemplate runat="server" ID="DeleteTemplate1">
                    <Template>
                        <a href="javascript:" style="outline:none">
                            <img id="imgDeleteBasket" src="/images/Button/Delete.png" alt="" onclick='gridBasketDetail.delete_record(this);' width="50" height="25" style="border-style: none"/>
                        </a>
                    </Template>
                </ogrid2:GridTemplate>
                <ogrid2:GridTemplate runat="server" ID="EditTemplate">
                    <Template>
                        <a href="javascript:" style="outline:none">
                            <img id="imgUpdateBasket_<%#Container.PageRecordIndex %>" src="/images/Button/Update.png" alt="" onclick='popUpdate(this);' class="ob_gAL" width="50" height="25" style="border-style: none"/>
                        </a>
                    </Template>
                </ogrid2:GridTemplate>
                
                <ogrid2:GridTemplate runat="server" ID="GiaTienTemplate">
                    <Template>
                        <%# E2_WEBSITE.Code.Utilities.ConvertToMoneyFormat(int.Parse(Container.Value.ToString()), true)%>
                    </Template>
                </ogrid2:GridTemplate>
		    </Templates>
		    
        </ogrid2:Grid>
        </content>
	    <loading style="text-align:center;width:485px;height:310px">
		    <table width=100% height=100% cellpadding=0 cellspacing=0>
			    <tr>
				    <td align=center valign="middle">
					    <img src="/images/loading_icons/6.gif">
				    </td>
			    </tr>
		    </table>
	    </loading>
	</oajax:CallbackPanel>
	
	<a href="javascript:" style="outline:none; text-decoration:none">
	    <img id="imgUpdatePrice" src="/images/Button/UpdatePrice.png" alt="Cập nhật giá cho các sản phẩm" onclick='UpdatePriceCurrentBasket()' width="127" height="22" style="border-style: none"/>
	</a>
	
	<asp:ImageButton ID="imgPay" runat="server" ImageUrl = "/images/Button/Pay.png" 
        AlternateText="Thanh toán giỏ hàng hiện tại" Width="97" Height="22" onclick="imgPay_Click"
        />
	
	<oajax:CallbackPanel id="cpBasketList" runat="server">
        <content>
            <ogrid:Grid
                    runat="server" ID="gridListBasket" AutoGenerateColumns="false"
		            FolderStyle="/App_Themes/E2GroupTheme/obout/styles/style_4" 
		            AllowAddingRecords="false" 
		            AllowColumnResizing = "false"
		            AllowRecordSelection = "false"
		            AllowSorting = "true"
		            CallbackMode = "true" 
		            ondeletecommand="gridListBasket_DeleteCommand"
		            OnRebind="RebindBasketList"
		            AllowPageSizeSelection ="true"
		            >
                <Columns>
                    <ogrid:Column DataField="MaSoGio" HeaderText="Mã giỏ" Width = "70" Wrap = "true" Align = "center"></ogrid:Column>
                    <ogrid:Column DataField="DangSuDung" HeaderText="Giỏ hàng đang được sử dụng" runat="server" Wrap = "true" Width = "100" Align = "center">
			            <TemplateSettings TemplateID="CheckTemplate"/>
			        </ogrid:Column>
                    <ogrid:Column DataField="NgayLapGio" HeaderText="Thời điểm lập giỏ" Width="120" Wrap = "true" Align="center"></ogrid:Column>
                    <ogrid:Column DataField="NgayCapNhatGio" HeaderText="Lần cuối cập nhật" Width = "120" Wrap="true" Align="center"></ogrid:Column>
                    <ogrid:Column DataField="TongTien" HeaderText="Tổng tiền" Width="120" Wrap = "true" Align="center">
                        <TemplateSettings TemplateId="GiaTienTemplate1" />
                    </ogrid:Column>
                    <ogrid:Column DataField="" HeaderText="Xóa giỏ" Width="90" AllowDelete="true" Visible="true" Wrap ="true" Align="center" runat="server">
                        <TemplateSettings TemplateID="DeleteTemplate"/>
                    </ogrid:Column>
                </Columns>
                <ClientSideEvents 
                    OnBeforeClientDelete = "gridListBasket_OnBeforeDelete"
                    OnClientDelete = "gridListBasket_OnDelete"/>
                <Templates>				
                        <ogrid:GridTemplate runat="server" ID="CheckTemplate" ControlID = "rbtnDangSuDuneg" ControlPropertyName="Checked" UseQuotes = "false">
	                        <Template>
	                            <input type="radio" name="radio" onclick="ReloadBasketDetail(<%# Container.DataItem["MaSoGio"]%>)" id="rad_grid_<%# Container.DataItem["MaSoGio"]%>" <%#IsChecked(Boolean.Parse(Container.DataItem["DangSuDung"].ToString()))%> />
	                        </Template>
                        </ogrid:GridTemplate>  
                        <ogrid:GridTemplate runat="server" ID="DeleteTemplate">
                            <Template>
                                <a href="javascript:" style="outline:none">
                                    <img id="imgDeleteBasket" src="/images/Button/DeleteBasket.png" alt="" onclick='gridListBasket.delete_record(this);' width="50" height="25" style="border-style: none"/>
                                </a>
                            </Template>
                        </ogrid:GridTemplate>
                        <ogrid:GridTemplate runat="server" ID="GiaTienTemplate1">
                            <Template>
                                <%# E2_WEBSITE.Code.Utilities.ConvertToMoneyFormat(int.Parse(Container.Value.ToString()), true)%>
                            </Template>
                        </ogrid:GridTemplate>
		        </Templates>
		        
                <ScrollingSettings ScrollHeight="520" ScrollWidth = "510"/>
                <MasterDetailSettings LoadingMode="OnCallback" />
                <DetailGrids>
                    <ogrid:DetailGrid
                        runat="server" ID="gridBasketDetailLevel2" AutoGenerateColumns="false"
		                FolderStyle="/App_Themes/E2GroupTheme/obout/styles/style_9" 
		                AllowAddingRecords="false" 
		                AllowColumnResizing = "false"
		                AllowPageSizeSelection="false" 
		                AllowPaging="false"
		                AllowSorting = "true"
		                CallbackMode = "true"
		                DataSourceID = "dsLevel2"
		                Serialize = "true"
		                ForeignKeys="MaSoGio"
		                >
                        <Columns>
                            <ogrid:Column DataField="TenSanPham" HeaderText="Tên sản phẩm" Width = "125" Wrap="true" Align="center"></ogrid:Column>
                            <ogrid:Column DataField="Url" HeaderText="Hình ảnh" Width="100" Align="center" Wrap = "true">
                                <TemplateSettings TemplateID="ImageTemplate1" />
                            </ogrid:Column>
                            <ogrid:Column DataField="MauSac" HeaderText="Màu sắc" Width = "90" Wrap ="true" Align="center"></ogrid:Column>
                            <ogrid:Column DataField="SoLuong" HeaderText="Số lượng" Width = "90" Wrap ="true" Align="center"></ogrid:Column>
                            <ogrid:Column DataField="DonGia" HeaderText="Đơn giá" Width="120" Wrap = "true" Align="center">
                                <TemplateSettings TemplateId="GiaTienTemplate2" />
                            </ogrid:Column>
                            <ogrid:Column DataField="ThanhTien" HeaderText="Thành tiền" Width="120" Wrap = "true" Align="center">
                                <TemplateSettings TemplateId="GiaTienTemplate2" />
                            </ogrid:Column>
                            <ogrid:Column DataField="NgayCapNhat" HeaderText="Lần cập nhật cuối" Width = "120" Wrap = "true"  Align="center"></ogrid:Column>
                            <ogrid:Column DataField="CanCapNhatDonGia" HeaderText="Đơn giá đã cập nhật mới nhất" Width="120" Wrap = "true" Align="center">
                                <TemplateSettings TemplateId="NeedUpdateTemplate1" />
                            </ogrid:Column>
                        </Columns>
                        
                        <Templates>
                            <ogrid:GridTemplate runat="server" ID="ImageTemplate1">
		                        <Template>
		                            <a href = "javascript:parent.location.href='/Products/detail.aspx?ProductId=<%# Container.DataItem["idSanPham"]%>';" style="outline:none">
		                                <img src="/images/HinhAnhSanPham/<%# Container.DataItem["Url"] %>" alt="" width="50" height="50" border="0" />
                                    </a>
		                        </Template>
	                        </ogrid:GridTemplate>
            	            
	                        <ogrid:GridTemplate runat="server" ID="NeedUpdateTemplate1">
		                        <Template>
		                            <img src="/images/Status/<%#GetUpdateStatus(Container.DataItem["CanCapNhatDonGia"])%>" alt="" width="20" height="20" />
		                         </Template>
	                        </ogrid:GridTemplate>
	                        
	                        <ogrid:GridTemplate runat="server" ID="GiaTienTemplate2">
                                <Template>
                                    <%# E2_WEBSITE.Code.Utilities.ConvertToMoneyFormat(int.Parse(Container.Value.ToString()), true)%>
                                </Template>
                            </ogrid:GridTemplate>
		                </Templates>
		                <ScrollingSettings ScrollHeight="520" ScrollWidth = "510"/>
                    </ogrid:DetailGrid>
                </DetailGrids>
                
            </ogrid:Grid>
        </content>
	    <loading style="text-align:center;width:485px;height:310px">
		    <table width=100% height=100% cellpadding=0 cellspacing=0>
			    <tr>
				    <td align=center valign="middle">
					    <img src="/images/loading_icons/6.gif">
				    </td>
			    </tr>
		    </table>
	    </loading>
	</oajax:CallbackPanel>
    
    <a href="javascript:" style="outline:none">
        <img id="imgAddNewBasket" src="/images/Button/AddNewBasket.png" alt="" onclick="AddNewBasket()" border="0" width="135" height="25" style="border-style: none"/>
    </a>
    
    
    
                   
    <!-- Fly out windows -->
    <oflyout:Flyout runat="server" ID="Flyout1" zIndex="20" Align="BOTTOM" Position="BOTTOM_LEFT" CloseEvent="NONE"
            OpenEvent="NONE" DelayTime="0" IsModal="true" PageOpacity="60">
            
            <input id="ipIdChiTietGioHangInFlyOut" type="hidden"/>
            <input id="ipOldProductQuantity" type="hidden"/>
            <input id="ipMaxProductQuantity" type="hidden"/>
            
            
            <a href="javascript:<%=Flyout1.getClientID()%>.Close()" style ="left:auto; font:11px Verdana; text-decoration:underline; font-weight:bolder; color:Red">[Đóng]</a>
            <table width="300" height="100px" class="rowEditTable" >
                <tr>
                </tr>
                <tr>
                    <td rowspan="3">
                        <img id="imgProductInFlyout" width = "80" height="80" alt=""/>
                    </td>
                    <td align="left">Sản phẩm:<td>
                    <td align = "left">
                        <label id = "lbProductNameInFlyout" style="font-weight:bolder"></label>
                    </td>
			    </tr>
			    <tr>
			        <td align="left">Giá:<td>
			        <td align="left">
			            <label id = "lbGia" style="font-weight:bold; color:Red;"></label>
                    </td>
			    </tr>
			    <tr>
			        <td align="left">Số lượng:<td>
			        <td align="left">
                        <input type="text" id="tbProductQuantity" size="2" onkeypress="return onlyNumbers();" maxlength="5"/>
                    </td>
			    </tr>
			    <tr>
			        <td colspan="4" align="right">
			            <a href="javascript:" style="outline:none; text-decoration:none">
                            <img id="imgOK" src="/images/Button/Agree.png" alt="" onclick="closeFlyout(); saveChange();" border="0" width="62" height="22" style="border-style: none"/>
                        </a>
                        <a href="javascript:" style="outline:none">
                            <img id="imgCancel" src="/images/Button/Disagree.png" alt="" onclick="closeFlyout();" border="0" width="39" height="22" style="border-style: none"/>
                        </a>
			        </td>
			    </tr>
            </table>
    </oflyout:Flyout>
    
    <asp:SqlDataSource ID="dsLevel2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        
        SelectCommand="select ctgh.id as idChiTietGiohang, ctgh.idGioHang, sp.id as idSanPham,
                ha.id as idHinhAnh,
                sp.TenSanPham,
                ctgh.SoLuong,
                ctgh.DonGia,
                ctgh.DonGia*ctgh.SoLuong as ThanhTien,
                ctgh.NgayCapNhat,
                ha.Url,
                ha.MauSac,
                CanCapNhatDonGia = 
                CASE 
                WHEN ctgh.DonGia = sp.Gia THEN 0 
                ELSE 1 
                END
                from (CHI_TIET_GIO_HANG as ctgh join SAN_PHAM as sp on ctgh.idSanPham = sp.id) 
                join HINH_ANH as ha on ctgh.idHinhAnh = ha.id 
                where ctgh.idGioHang = @MaSoGio
                order by ctgh.NgayCapNhat desc">
        <SelectParameters>
            <asp:Parameter Name="MaSoGio" Type="Int16" />
        </SelectParameters>
    </asp:SqlDataSource>
    
    </form>
</body>
</html>